<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./style1.css" />
    <!--
			1. 首先给必填项,添加尾部添加一个小红点
			2. 获取用户输入的信息,做相应的校验
			3. 事件: 获得焦点, 失去焦点, 按键抬起
			4. 表单提交的事件

			Jq的方式来实现:
				1. 导入JQ的文件
				2. 文档加载事件: 在必填项后天加一个小红点
				3. 表单校验确定事件: blur focus keyup
				4. 提交表单 submit
		-->
    <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
    <script>
        $(function(){  //默认做一些页面初始化
            //动态在必填项后面添加小红点
            $(".bitian").after("<font class='high'>*</font>");

            //给必填项绑定事件
            $(".bitian").blur(function(){
                //首先获取用户当前输入的值
                var value = this.value; //123
                //清空上一次提示的信息
                $(this).parent().find(".formtips").remove();

                //判断当前的值是哪一项输入的值
                if($(this).is("#username")){  //判断是否是用户名输入项
                    if(value.length < 6){
                        $(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
                    }else{
                        $(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
                    }
                }

                if($(this).is("#password")){  //判断是否是密码输入项
                    if(value.length < 6){
                        $(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
                    }else{
                        $(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
                    }
                }
            }).focus(function(){
                $(this).triggerHandler("blur");
            }).keyup(function(){
                $(this).triggerHandler("blur");
            })



            //给表单提交绑定事件
            $("form").submit(function(){
                //触发所有必填项的校验
                $(".bitian").trigger("focus");
                //找到错误信息的个数
                if($(".onError").length > 0){
                    return false;
                }
                return true;
            });
        });
        
    </script>

</head>
<body>
    <form action="./trigger和triggerHandler.html">
        <div>
            用户名：<input type="text" class="bitian" id="username">
        </div>
        <div>
            密码：<input type="password" class="bitian" id="password">
        </div>
        <div>
            手机号：<input type="tel">
        </div>
            <input type="submit" value="提交">
    </form>
</body>
</html>